.panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100%;
  position: relative;
  background-color: var(--explorer-panel-bg);
  color: var(--input-label-color);
}

.panel-header {
  background-color: var(--toolbar-bg);
  color: var(--tab-color);
  line-height: 36px;
  min-height: 36px;
  padding-left: 16px;
  display: flex;
  white-space: nowrap;
  justify-content: flex-end;

  & > .accessories {
    display: flex;
    align-items: center;
    width: 100%;

    & > button {
      background-color: transparent;
      color: var(--neutral-5);
      border: 0;
      cursor: pointer;
      white-space: nowrap;

      &:hover:not([disabled]), &[selected], &[aria-selected] {
        &:after {
          border: none;
        }
      }
    }

    
    & > button[name="leftArrow"],
    & > button[name="rightArrow"],
    & > button[name="diff"] {
      height: 30px;
      width: auto;
      min-width: auto;
      padding: 0 6px;

      &:hover:not([disabled]), &[selected], &[aria-selected] {
        &:after {
          border: none;
        }
      }
    }

    // json button
    & > button[name="json"] {
      margin-right: auto;
    }

    // toggle diff button
    & > button[name="diff"] {
      padding-right: 12px; // items have 6 padding on each side, so right-most item should have 12 padding
    }
  }
}

.panel-body {
  background-color: var(--toolbar-bg);
  color: inherit;
  flex: 1;
  overflow: auto;
  padding: 0;
}
